<template>
  <div class="password-popup">
    <van-popup
      v-model:show="popupShow"
      round
      :style="{ background: 'var(--background-color)', padding: '20rem' }"
    >
      <h2>修改密码</h2>

      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="password1"
            type="password"
            name="密码"
            label="原密码"
            placeholder="请输入原密码"
          />
          <van-field
            v-model="password2"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入修改密码"
          />
          <van-field
            v-model="password3"
            type="password"
            name="密码"
            label="密码"
            placeholder="请再次输入修改密码"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            round
            block
            color="#ffcd41"
            type="primary"
            native-type="submit"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
// defineModel 为子组件获取父组件传递的值 (双向绑定)
import { defineModel, ref } from "vue";
// 引入修改密码接口
import { putUserPassword } from "@/api";
// 引入用户类型
import { UserType } from "@/api";
// 引入vant组件及样式
import { showConfirmDialog, showToast } from "vant";
import "vant/es/toast/style";
import "vant/es/dialog/style";
// 父组件传过来的值
const popupShow = defineModel<boolean>("popupShow");
const userInfo = defineModel<UserType>("userInfo");
// 旧密码
const password1 = ref<string>("");
// 新密码
const password2 = ref<string>("");
// 确认新密码
const password3 = ref<string>("");
// 修改密码逻辑
const onSubmit = () => {
  showConfirmDialog({
    title: "提示",
    message: "是否确认修改密码",
    confirmButtonColor: "#ffcd41",
  })
    .then(async () => {
      if (password2.value !== password3.value) return;
      const result = (await putUserPassword({
        oldPwd: password1.value,
        newPwd: password2.value,
        id: userInfo.value.id,
      })) as any;
      if (result.code === 2001) return;
      userInfo.value.password = result.data.password;
      localStorage.setItem("userInfo", JSON.stringify(userInfo.value));
      popupShow.value = false;
    })
    .catch(() => {
      showToast("取消修改");
    });
};
</script>
<style lang="scss">
.password-popup {
  font-size: 16rem;
  text-align: center;

  .van-cell-group {
    background: transparent;
  }

  h2 {
    text-shadow: 1rem 1rem var(--shadow-color), -1rem -1rem var(--shadow-color);

    font-weight: 600;
    font-size: 26rem;
    color: $color-yellow;
    margin: 10rem 0 24rem;
  }
}
</style>
